export default {
  /* 自定义全局拖拽指令 */
  created(el: any) {
    el.onmousedown = (e1: any) => {
      // 算出鼠标相对元素的的位置
      let width = e1.clientX - el.offsetLeft;
      let height = e1.clientY - el.offsetTop;

      document.onmousemove = (e2) => {
        // 鼠标的位置减去鼠标相对元素的位置得到元素自身的位置
        let modalLeft = e2.clientX - width;
        let modalTop = e2.clientY - height;

        // 限制拖动时盒子不要自动超出浏览器现有宽度与高度
        if (modalLeft < 0) {
          modalLeft = 0;
        }
        if (modalTop < 0) {
          modalTop = 0;
        }
        if (modalLeft + el.offsetWidth >= window.innerWidth) {
          modalLeft = window.innerWidth - el.offsetWidth;
        }
        if (modalTop + el.offsetHeight >= window.innerHeight) {
          modalTop = window.innerHeight - el.offsetHeight;
        }
        // 当鼠标在浏览器范围内时,开始移动
        if (
          e2.clientX <= window.innerWidth &&
          e2.clientX > 0 &&
          e2.clientY <= window.innerHeight &&
          e2.clientY >= 0
        ) {
          el.style.left = modalLeft + "px";
          el.style.top = modalTop + "px";
        } else {
          document.onmousemove = null;
        }
      };
    };
    // 完成拖拽时记得把监听的事件移除
    document.onmouseup = () => {
      document.onmousemove = null;
    };
  },
  // update也是个钩子函数，在这个钩子函数里继续完成取消事件监听
  update: (el: any) => {
    document.onmouseup = null;
  },
};

/**
 * 指令钩子
 * 一个指令的定义对象可以提供几种钩子函数 (都是可选的)：
 */
// const myDirective = {
//   // 在绑定元素的 attribute 前
//   // 或事件监听器应用前调用
//   created(el: any, binding: any, vnode: any, prevVnode: any) {
//     // 下面会介绍各个参数的细节
//   },
//   // 在元素被插入到 DOM 前调用
//   beforeMount(el: any, binding: any, vnode: any, prevVnode: any) {},
//   // 在绑定元素的父组件
//   // 及他自己的所有子节点都挂载完成后调用
//   mounted(el: any, binding: any, vnode: any, prevVnode: any) {},
//   // 绑定元素的父组件更新前调用
//   beforeUpdate(el: any, binding: any, vnode: any, prevVnode: any) {},
//   // 在绑定元素的父组件
//   // 及他自己的所有子节点都更新后调用
//   updated(el: any, binding: any, vnode: any, prevVnode: any) {},
//   // 绑定元素的父组件卸载前调用
//   beforeUnmount(el: any, binding: any, vnode: any, prevVnode: any) {},
//   // 绑定元素的父组件卸载后调用
//   unmounted(el: any, binding: any, vnode: any, prevVnode: any) {},
// };
